<template>
  <section class="search-wrap">

    <div class="search-row">

      <span>
        <label style="margin-right:20px">请假时间</label> 
        <el-date-picker
          style="width:120px"
          v-model="searchOption.start"
          @change = '(val)=>searchOption.start = val'
          format='yyyy-MM-dd'
          placeholder="开始时间">
        </el-date-picker>  
      </span>

      <span>
        <label style='margin:0 5px'> - </label>
        <el-date-picker
          style="width:120px"
          v-model="searchOption.end"
          @change = '(val)=>searchOption.end = val'
          format='yyyy-MM-dd'
          placeholder="结束时间">
        </el-date-picker>
      </span>

      <span style='margin:0 30px'>
        <el-select style='width:260px' placeholder="部门" v-model='searchOption.selected' clearable>
          <el-option v-for='(k,i) in selectList' :value='k.deptid' :label='k.descr'>
          </el-option>
        </el-select>
      </span>


      <span>
        <el-input 
          placeholder="请输入员工姓名"
          v-model="searchOption.name"
          style="width:130px;margin-right:20px"
          @keyup.enter.native ='handleSearch'
          >
        </el-input>
      </span>  


      <span style='width:12%'>
        <el-select placeholder="假期类型" v-model='searchOption.vacationSelected' clearable>
          <el-option v-for='(k,i) in vacationList' :value='k.confId' :label='k.name'>
          </el-option>
        </el-select>
      </span>

    </div>

    <p style="margin-top:20px"><el-button type='primary' @click.stop='handleSearch'>搜索</el-button></p>
    

  </section>
</template>

<script>
import Bus from './bus'
import Vue from 'vue'
import { Message, DatePicker } from 'element-ui'
Vue.use(DatePicker)
export default {
	data () {
		return {
			tableData: [],
			searchOption: {
				name: '',
				selected: '',
				start: new Date(),
				end: new Date(),
				vacationSelected: ''
			},
			selectList: [],
			vacationList: [],
			dateFormat: {
				disabledDate (time) {
					return time.getTime() >= new Date().getTime()
				}
			}

		}
	},
	mounted () {
		this.setSelectList()
    	// setTimeout(() => {
			this.transFormDate()
		// }, 100)
	},
	methods: {
    	transFormDate () {
			if (typeof this.searchOption.start === 'object') {
				const month = new Date().getMonth() + 1 > 10 ? new Date().getMonth() : '0' + new Date().getMonth()
				this.searchOption.start = `${new Date().getFullYear()}-${month}-${new Date().getDate()}`
			}
			if (typeof this.searchOption.end === 'object') {
				const month = new Date().getMonth() + 1 > 10 ? new Date().getMonth() : '0' + (new Date().getMonth() + 1)
				this.searchOption.end = `${new Date().getFullYear()}-${month}-${new Date().getDate()}`
			}


		},
		setSelectList () {
			this.Axios.Post('/vacationReport/departmentList')
				.then((res) => {
					this.selectList = res.data.datas
				})
			// 假期下拉列表
			this.Axios.Post(this.URL.getLeaveInstruction.url)
				.then((res) => {
					this.vacationList = res.data.datas
				})
		},
		handleSearch () {
			if (this.checkDate()) {
				// 发送请求
				const { end, start, selected, name, vacationSelected } = this.searchOption
				const params = {
					'departmentCode': selected,
					'employeeCode': name,
					'endTime': end,
					'startTime': start,
					'processType': vacationSelected,
					'setid': '',
				}
				// const params = {
				// 		"departmentCode": "1000050",
				// 		"employeeCode": "C1007101",
				// 		"endTime": "2019-02-28",
				// 		"process_type": "年假",
				// 		"setid": "",
				// 		"startTime": "2018-01-01",
				// 		"token": ""
				// }
				this.Axios.Post('/vacationReport/vacationType', params)
					.then((res) => {
						this.tableData = res.data.datas
						Bus.$emit('tableData', this.tableData)
						Bus.$emit('searchOption', this.searchOption)
					})
			}
		},
		checkDate () {
			if (!this.searchOption.end || !this.searchOption.start) {
				Message.warning('请设置起止时间')
				return false
			} else if (new Date(this.searchOption.end) < new Date(this.searchOption.start)) {
				Message.warning('开始时间应小于结束时间')
				return false
			}
			return true
		}

	},
}
</script>

<style scoped lang='less'>
.search-wrap {
   padding: 30px 30px 0 20px;

  .search-row {
    overflow: hidden;
    min-width: 1000px;
    & > span {
      float: left;
    }
  }
}
</style>